import { BaseChartConfig } from './../basechartconfig.js';
import { TemplateManager } from '/src/util/templatemanager/templatemanager.js';

export class ChartSequenceConfig extends BaseChartConfig {
    constructor(container, options) {
        super(container, options);
    }

    // 基础配置数据获取方法
    getConfigData(chart) {
        const keyProperties = ['name', 'type', 'barWidth', 'smooth'];
        if (!chart) return {};

        return chart.getOption()['series'].reduce((acc, seriesItem) => {
            const key = seriesItem.lastestName;
            if (key) {
                const filteredItem = {};
                keyProperties.forEach(prop => {
                    if (seriesItem.hasOwnProperty(prop)) {
                        filteredItem[prop] = seriesItem[prop];
                    }
                });
                acc[key] = filteredItem;
            }
            return acc;
        }, {});
    }

    async generateConfigForm() {
        await this.generateBaseConfigForm();
        await this.generateSeriesConfigForm();
    }

    async generateSeriesConfigForm() {
        this.$seriesConfigContainer.empty();
        for (const [index, series] of this.data.series.entries()) {
            try {
                const html = await TemplateManager.loadTemplate('/src/components/component/chart/config/sequence/chart-series-config.html', {
                    index: index,
                    name: series.name,
                    cid: this.cid
                });
                this.$seriesConfigContainer.append(html);
                this.generateSeriesNameConfigForm(index, series);
                this.generateSeriesTypeConfigForm(index, series);
            } catch (error) {
                console.error(`加载第 ${index} 个系列配置模板失败`, error);
            }
        }
    }

    async generateSeriesNameConfigForm(index, series) {
        const $legendInput = $(`#legendName-${this.cid}-${index}`);

        $legendInput.off('input');
        $legendInput.on('input', (e) => {
            const name = e.target.value;
            this.updateSeriesConfig(index, { name });
        });

        // 初始化 legendInput
        $legendInput.val(series.name || '');
        $(`#name-${this.cid}-${index}`).show();
    }

    async generateSeriesTypeConfigForm(index, series) {
        const $typeSelect = $(`#chartType-${this.cid}-${index}`);
        const $lineStyleSelect = $(`#lineStyle-${this.cid}-${index}-select`);
        const $barWidthInput = $(`#barWidth-${this.cid}-${index}-input`);

        $typeSelect.off('change');
        $lineStyleSelect.off('change');
        $barWidthInput.off('input');

        $typeSelect.on('change', (e) => {
            const type = e.target.value;
            this.updateSeriesConfig(index, { type });
            this.toggleChartTypeOptions(index, type);
        });

        $lineStyleSelect.on('change', (e) => {
            const smooth = e.target.value === 'smooth';
            this.updateSeriesConfig(index, { smooth });
        });

        $barWidthInput.on('input', (e) => {
            const barWidth = e.target.value + '%';
            this.updateSeriesConfig(index, { barWidth });
        });

        // 设置初始值
        const initialType = series.type || 'line';
        $typeSelect.val(initialType);

        // 初始化 lineStyleSelect
        if (series.smooth !== undefined) {
            $lineStyleSelect.val(series.smooth ? 'smooth' : 'straight');
        }

        // 初始化 barWidthInput
        if (series.barWidth !== undefined) {
            const barWidthValue = series.barWidth.replace('%', '');
            $barWidthInput.val(barWidthValue);
        }

        this.toggleChartTypeOptions(index, initialType);
        $(`#type-${this.cid}-${index}`).show();
    }

    toggleChartTypeOptions(index, type) {
        $(`#lineStyle-${this.cid}-${index}`).toggle(type === 'line');
        $(`#barWidth-${this.cid}-${index}`).toggle(type === 'bar');
    }
}